<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>模拟axios取消处理</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning"> 取消请求 </button>
    </div>
    <script>
        //1. 声明Axios对象
        function Axios(config){
            this.config=config;
        }
        Axios.prototype.request=function(config){
            return dispatchRequest(config);
        }
        function dispatchRequest(config){
            return xhrAdapter(config)
        }
        function xhrAdapter(config){
            return new Promise((resolve, reject)=>{
                const xhr= new XMLHttpRequest();
                xhr.open(config.method,config.url);
                xhr.send();
                xhr.onreadystatechange= function(){
                    if(xhr.readyState===4){
                        if(xhr.status>=200 && xhr.status< 300){
                            resolve({
                                status: xhr.status,
                                statusText: xhr.statusText
                            });
                        }else{
                            reject(new Error('请求失败'))
                        }
                    }
                }
                //取消请求的处理
                if(config.cancelToken){
                    config.cancelTokena.promise.then(value=>{
                        console.log("xhr.abort()")
                        xhr.abort();  //这个是xhr 取消请求的方法
                        reject(new Error('取消请求'))
                    })
                }
            })
        }

        //声明 CancelToken 取消处理的对象
        function CancelToken(executor){
            var  resolvePromise;
            this.promise= new Promise((resolve)=>{
                resolvePromise=resolve;
            })
            executor(function(){
                console.log("resolvePromise()")
                resolvePromise(); // 相当于调用上面的resolve;
            })

        }


        //创建axios函数
        const context= new Axios({});
        const axios= Axios.prototype.request.bind(context);


        const btns = document.querySelectorAll('button');
        let cancel= null;
        btns[0].onclick = function(){
            if(cancel !=null){ cancel()};

            let cancelToken = new CancelToken(function(c){
                 cancel=c;
            })
            axios({
            method: 'GET',
            url:'https://api.uomg.com/api/rand.qinghua',
            cancelToken: cancelToken
            }).then(response =>{
                console.log(response);
                cancel=null;
            })
        }
       


        //绑定第二个事件取消请求
        btns[1].onclick = function(){
            if(cancel !=null){ cancel()};
            console.log('点击了取消')
        }

    </script>
</body>
</html>